import React from 'react';
import {Popup, PopupTitle} from "@/components/k-view";
import {View} from "@gluestack-ui/themed";
import ChooseDate from "./ChooseDate";
import {dateScreenList} from "@/theme/enums/screen";
import {ChooseDatePopupProps} from "./type";
import {Option} from "@/types/public";

const ChooseDatePopup = (props: ChooseDatePopupProps) => {
    const {
        isVisible,
        dispatch,
        onChange
    } = props;

    // 处理弹窗关闭
    function handleCloseChoosePopup() {
        dispatch({
            type: "close"
        });
    }

    function handleChange(item?: Option, i?: number) {
        handleCloseChoosePopup();
        onChange(item, i);
    }

    return (
        <Popup
            isVisible={isVisible}
            mode={"bottom"}
            dispatch={dispatch}
        >
            <View
                bg={"white"}
                borderRadius={"$md"}
            >
                <PopupTitle
                    title={"时间选择"}
                    onRightClick={handleCloseChoosePopup}
                >
                </PopupTitle>
                <View
                    p={"$4"}
                >
                    <ChooseDate options={dateScreenList} onChange={handleChange}></ChooseDate>
                </View>

            </View>
        </Popup>
    );
};

export default ChooseDatePopup;